<template>
      <a-modal
        :title="addFileData.title"
        v-model="addFileData.show"
        width="560px"
        wrapClassName="addUser"
        style="overflow:hidden;"
        @cancel="handleClose">
        <div style="padding:20px 50px 20px 50px;box-sizing:border-box;width:100%">
        <el-row>
            <el-form :rules="rules" ref="file" size="small" :model="parames" label-width="100px" label-position="left">
                <el-form-item label="文件名称:" prop="fileName">
                  <el-input  v-model="parames.fileName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="文件类型:" prop="fileType">
                  <el-select style="width:100%"  v-model="parames.fileType" placeholder="请选择">
                      <el-option label="企业证件" value="1"></el-option>
                      <el-option label="个人证件" value="2"></el-option>
                      <el-option label="其他" value="3"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="文件上传:" prop="url">
                  <el-upload
                    class="upload-demo"
                    drag
                    :file-list="fileList"
                    :limit="1"
                    :headers="myHeaders"
                    :on-success="handleSucess"
                    :on-remove="handleRemove"
                    :action="fileCation">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>
                      <p>只能图片、文档、压缩包，且不超过50M</p>
                    </div>
                    <div class="el-upload__tip" slot="tip"></div>
                  </el-upload>
                </el-form-item>
            </el-form>
        </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="handleClose">取消</el-button>
            <el-button size="small" type="primary" @click="handleSend">确定</el-button>
        </span>
      </a-modal>
</template>

<script>
export default {
    props: ['addFileData'],
    data() {
        return {
          fileCation: this.$api.postCustomerFileUpload,
          fileList: [],
          myHeaders: {authorization: ''},
          parames: {
            customerId: '',
            fileName: '', //文件名称
            fileType: '', //文件类型
            fileSize: '', //大小
            url: ''
          },
          rules: {
            fileName: [
              { required: true, message: "请输入", trigger: ['blur','change'] },
            ],
            fileType: [
              { required: true, message: "请选择", trigger: ['blur','change'] },
            ],
            url: [
              { required: true, message: "请上传附件", trigger: ['blur','change'] },
            ]
          },
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {
        handleSucess (response,file,fileList) { //附件上传
          this.parames.fileName = file.name
          this.parames.fileSize = parseInt(file.size/1024)
          this.parames.url = response.data.url
          console.log(fileList)
        },
        handleRemove (file) { //附件移除
          this.parames.url = ''
        },
        handleSend () { //提交信息
          this.$refs['file'].validate((valid) => {
            if (valid) {
              if (this.addFileData.type == 'saveEdit') { //修改保存成功
                  this.$post(this.$api.postCustomerFileEdit,this.parames).then(response => {
                    if (response.data.succeed) {
                      this.$message({ type:'success',message: '修改成功'})
                      this.$emit('checkRender') //刷新父级页面
                      this.handleClose()
                    }
                  })
                } else if (this.addFileData.type == 'new') { //新建时上传附件
                  this.$emit('addFile',JSON.stringify(this.parames),'new','')
                  setTimeout(() => {
                    this.handleClose()
                  }, 200);
                } else if (this.addFileData.type == 'newEdit') { //新建时的修改
                  this.$emit('addFile',JSON.stringify(this.parames),'newEdit',this.addFileData.index,)
                  this.handleClose()
                } else if (this.addFileData.type == 'saveNew') { //编辑时修改
                  this.$post(this.$api.postCustomerFileAdd,this.parames).then(response => {
                    if (response.data.succeed) {
                      this.$message({ type:'success',message: '新增成功'})
                      this.$emit('checkRender') //刷新父级页面
                      this.handleClose()
                    }
                  })
                }
            }
          })
        },
        render () {
          this.loading = true
          this.$post(this.$api.postCustomerContactsDel,{ //根据id获取详情商机数据
            customerContactsId: row.id
          }).then(response => {
            if (response.data.succeed) {
              setTimeout(() => {
                this.loading = false
                this.render()
              }, 200);
            }
          })
        },
        handleClose () { //关闭弹窗
            this.addFileData.show = false
        },
        resetData () {
          this.parames.id = ''
          this.parames.customerId = ''
          this.parames.fileName = ''
          this.parames.fileType = ''
          this.parames.fileSize = ''
          this.parames.url = ''
          this.fileList = []
          this.$refs.file.resetFields()
        }
    },
    components: {
    },
    computed: {
      changeDialog () {
        return this.addFileData.show
      }
    }, 
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.myHeaders.authorization = this.$utils.getLocalStorage('usertoken')
            if (this.addFileData.type == 'saveEdit' || this.addFileData.type == 'newEdit') {
              this.parames = JSON.parse(this.addFileData.data)
              this.fileList.push({
                name: this.parames.fileName,
                url: this.parames.url
              })
            } else if (this.addFileData.type == 'saveNew') {
              this.parames.customerId = this.addFileData.id
            }
          } else {
            this.resetData()
          }
        }
      }
    },
};
</script>

<style>
.addUser .ant-modal-body{
  padding: 0;
}
</style>